<!-- ======= Contacts modal ======= -->
<div id="contacts-modal" class="modal fade" style="z-index: 1112" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Контактная информация</h5>
        <button type="button" class="ms-3 border border-0" data-bs-target="#contacts-table-modal" data-bs-toggle="modal" aria-label="Table"><i class="fa fa-table fs-5" aria-hidden="true"></i></button>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0">
        <div class="container-fluid p-0">
          <ul id="contact-group" class="accordion accordion-flush contacts-accordion w-100"></ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- ======= End Contacts modal ======= -->


<script>

(function ($) {
	
	"use strict";

  var oReq = new XMLHttpRequest();
  oReq.open("GET", "./data/contacts.xlsx", true);
  oReq.responseType = "arraybuffer";
  oReq.onload = function(e) {
    var workbook = XLSX.read(oReq.response, { type: 'array' });
    var contacts = XLSX.utils.sheet_to_row_object_array(workbook.Sheets["Контакты"]);
    var departaments = XLSX.utils.sheet_to_row_object_array(workbook.Sheets["Отделы"]);
    
    var contact_group = document.querySelector('#contact-group.contacts-accordion');

    for (var i = 0; i < departaments.length; i++)
    {
      contact_group.insertAdjacentHTML('beforeEnd', 
        '<li class="card">' + 
        ' <div class="card-header p-0">' + 
        '   <button class="d-flex px-4 py-3 align-items-center justify-content-between btn btn-link" data-bs-toggle="collapse" data-bs-target="#contact-list-' + i + '" aria-expanded="false" aria-controls="collapse1">' + 
        '     <div class="heading d-flex align-items-center"><h3 class="mb-0">' + departaments[i]["Наименование"] + '</h3></div><i class="fa fa-chevron-down" aria-hidden="true"></i>' + 
        '   </button>' + 
        ' </div>' + 
        ' <div id="contact-list-' + i + '" class="accordion-collapse collapse" aria-labelledby="' + departaments[i]["Наименование"] + '" data-bs-parent="#contact-group">' + 
        '   <div class="card-body p-4 pt-md-3">' + 
        '     <ul class="accordion-list-group"></ul>' + 
        '   </div>' + 
        ' </div>' + 
        '</li>');

        var list_group = document.querySelector('#contact-group.contacts-accordion .collapse[aria-labelledby="' + departaments[i]["Наименование"] + '"] .accordion-list-group');
        contacts.filter((row) => row["Отдел"] == departaments[i]["Наименование"]).forEach(row => {
          list_group.insertAdjacentHTML('beforeEnd', 
            '<li class="accordion-list-item">' + 
            ' <div class="row w-100">' + 
            '   <div class="col-12 text-left text-muted">' + row["Должность"] + '</div>' + 
            '   <div class="col-12 text-left name lead text-muted fw-semibold">' + row["ФИО"] + '</div>' + 
            '   <div class="col-12 col-md-6"><a rel="_blank" href="tel:+78152450777" target="_blank"><i class="fa fa-phone-square fa-fw"></i> ' + row["Номер телефона"] + '</a></div>' + 
            '   <div class="col-12 col-md-6"><a rel="_blank" href="mailto:a.solopekin@uks51.ru" target="_blank"><i class="fa fa-envelope fa-fw"></i> ' + row["Электронная почта"] + '</a></span>' + 
            ' </div>' + 
            '</li>');
        });
    }
  }

  oReq.send();

})(window.jQuery);

</script>